<header class="hero-slider" title="hero-slider">


  <div class="swiper"  data-slides-per-view="1" data-draggable="true">
    <div class="swiper-wrapper">

      
      <div class="swiper-slide">
		<img src="img/demo/hero-3.jpg" loading="lazy">
		<div class="content">
			<div class="container">
				  <div>
					<div class="row align-items-center justify-content-center text-start">
					  <div class="col-lg-7">
						<h1 class="heading text-white mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">The next generation website builder</h1>
						<h2 class="text-white h3" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs,<br> websites or ecommerce stores.</h2>
						

						<div class="buttons mt-4" data-aos="fade-up" data-aos-delay="300">
						  <a href="https://www.vvveb.com" class="btn btn-primary text-white btn-lg">
							<span>⚡</span>
							<span>Free Download</span>
							<b>›</b>
						  </a>
						  <a href="https://demo.vvveb.com" class="btn btn-white text-white btn-lg">Live Demo</a>
						</div>


					  </div>
					  <div class="col-lg-5">
						<img src="img/demo/video-1.jpg" class="shadow img-thumbnail" loading="lazy">
					  </div>
					</div>
				  </div>
				</div>
		</div>
	   <div class="overlay"></div>
      </div>
      
		
      <div class="swiper-slide">
		<img src="img/demo/hero-3.jpg" loading="lazy">
		<div class="content">
			<div class="container">
				  <div>
					<div class="row align-items-center justify-content-center text-center">
					  <div class="col-lg-12">
						<h1 class="heading text-white mb-3 display-4 fw-bold" data-aos="fade-up" data-aos-delay="100">The fastest and leanest CMS</h1>
						<h2 class="text-white h3" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop website builder for blogs,
						  <br> presentation or ecommerce stores.
						</h2>
						
						<div class="buttons mt-4" data-aos="fade-up" data-aos-delay="300">
						  <a href="https://www.vvveb.com" class="btn btn-primary text-white  btn-lg">
							<span>⚡</span>
							<span>Free Download</span>
							<b>›</b>
						  </a>
						  <a href="https://demo.vvveb.com" class="btn btn-white text-white  btn-lg">Live Demo</a>
						</div>


					  </div>
					</div>
				  </div>
				</div>
		</div>
	   <div class="overlay"></div>
      </div>

      <div class="swiper-slide">
		<img src="img/demo/hero-3.jpg" loading="lazy">
		<div class="content">
			<div class="container">
				  <div>
					<div class="row align-items-center justify-content-center text-start g-5">
					  <div class="col-lg-5">
						<img src="img/demo/video-1.jpg" class="shadow img-thumbnail" loading="lazy">
					  </div>

					  <div class="col-lg-7">
						<h1 class="heading text-white mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">Open source CMS reinvented</h1>
						<h2 class="text-white h3" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs,<br> websites or ecommerce stores.</h2>
						

						<div class="buttons mt-4" data-aos="fade-up" data-aos-delay="300">
						  <a href="https://www.vvveb.com" class="btn btn-primary text-white btn-lg">
							<span>⚡</span>
							<span>Free Download</span>
							<b>›</b>
						  </a>
						  <a href="https://demo.vvveb.com" class="btn btn-white text-white  btn-lg">Live Demo</a>
						</div>


					  </div>
					</div>
				  </div>
				</div>
		</div>
	   <div class="overlay"></div>
      </div>

    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    
	<div class="swiper-pagination"></div>    
  </div>



    <div class="separator bottom">
		
		<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none"><defs><style>.cls-1{fill:var(--bs-body-bg);}</style></defs><title>rough-edges-bottom</title><path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)"/></svg>
		
    </div>


   <div class="background-container">
		<img src="img/demo/hero-3.jpg" alt="Hero background" loading="lazy">
	</div>


<script id="swiper-js" src="../../js/libs/swiper/swiper-bundle.min.js"></script> 
<link id="swiper-css" href="../../js/libs/swiper/swiper-bundle.min.css" rel="stylesheet">
<script>
var swiper = [];
function initSwiper(onlyNew = false) {
	var list = document.querySelectorAll('.swiper' + (onlyNew ? ":not(.swiper-initialized)" : "") );
	list.forEach(el => {
		//el.dataset
		let params = {      
			navigation: {
				nextEl: ".swiper-button-next",
				prevEl: ".swiper-button-prev",
			},      
			pagination: {
				el: ".swiper-pagination",
		  },
		};
		for (i in el.dataset) {
			let param = el.dataset[i];
			if (param[0] = '{') {
				param = JSON.parse(param);
			}
			params[i] = param;
		}
		swiper.push(new Swiper(el, params))
		//swiper.push(new Swiper(el, { ...{autoplay:{delay: 500}}, ...el.dataset}))		
	});
}	

initSwiper();
</script>

</header>
